<script setup lang="ts">

</script>

<template>
  <div class="emoji-container emoji-btn">
    <div class="emoji-box">
      <i-ant-design-smile-outlined class="icon"/>
      <span>表情</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .emoji-container {
    position: relative;
    z-index: 1;
    &.emoji-btn {
      user-select: none;
    }
    .emoji-box {
      display: flex;
      align-items: center;
      position: relative;
      cursor: pointer;
      .icon {
        fill: var(--tidy-font-2);
        background-repeat: no-repeat;
        background-size: cover;
        margin-right: 4px;
        transition: fill .3s;
      }
      span {
        color: var(--tidy-font-2);
        font-size: 14px;
        line-height: 22px;
        transition: color .3s;
      }
    }
    &.emoji-btn span {
      color: var(--tidy-font-2);
      font-size: 13px;
    }
  }
</style>
